<template>
  <div class="msettlement-goods">
    <ul v-if="commentList.length>0">
      <li class="comment-li"
          v-for="goods in commentList"
          :key="goods.id">
        <van-card :desc="goods.sku_id"
                  :title="goods.title"
                  :thumb="goods.is_compress==1?goods.pic_url+'80x80':goods.pic_url"
                  :thumb-link="goods.link">
          <div slot="tags">
            <span class="fontZiy" v-if="goods.is_self_support == 1">自营</span>
            <div class="price"
                 v-html="scaleGoodsPriceFn(goods.current_price)"></div>
            <div class="singles" v-if="goods.is_already_singles && type=='share'">
              <div>已晒单</div>
              <div v-if="comment_enjoy_point>0">已获得{{comment_enjoy_point}}{{point_name}}</div>
            </div>
            <div class="bottom-btn">
              <span v-if="type=='share'"
                    class="clearfix">
                <van-button
                  @click="Jump('shareOrder',{itemId:goods.order_item_id})"
                  class="msettlement-but"
                  v-if="goods.is_already_singles">继续晒单</van-button>
                <template v-else>
                <van-button
                   @click="Jump('shareOrder',{itemId:goods.order_item_id})"
                   class="msettlement-but"
                   v-if="comment_enjoy_point>0">晒单赠送{{comment_enjoy_point}}{{point_name}}</van-button>
                <van-button
                   @click="Jump('shareOrder',{itemId:goods.order_item_id})"
                   class="msettlement-but"
                   v-else>我要晒单</van-button>
                </template>
              </span>
              <span v-else-if="type=='evaluate'"
                    class="clearfix">
                <van-button
                   @click="Jump('goodsComment',{itemId:goods.order_item_id,type:'add'})"
                   class="msettlement-but"
                   v-if="goods.status==1">追加评价</van-button>
                <van-button
                   @click="Jump('goodsComment',{itemId:goods.order_item_id})"
                   class="msettlement-but"
                   v-if="goods.status!=1 && comment_point>0">评价赠送{{comment_point}}{{point_name}}</van-button>
                <van-button
                   @click="Jump('goodsComment',{itemId:goods.order_item_id})"
                   class="msettlement-but"
                   v-if="goods.status!=1 && !comment_point">评价晒单</van-button>
              </span>
              <span v-if="type=='price'"
                    class="clearfix">
                <van-button
                   @click="Jump('shareOrder',{itemId:goods.order_item_id,'type':'price'})"
                   class="msettlement-but">原价分享</van-button>
              </span>
            </div>
          </div>
        </van-card>
      </li>
    </ul>
    <div v-else>
      <no-data :noData=noData></no-data>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { getCommentList } from '@/api/user/member/memberApi'
import { scaleGoodsPrice } from '@/utils/index.js'
import noData from '@/components/noData/index'
import { Card } from 'vant'
Vue.use(Card)
export default Vue.extend({
  name: 'index',
  components: {
    noData
  },
  data() {
    return {
      noData: {
        img: 'https://img.wifenxiao.com/h5-wfx/images/commentList/no_evaluate.png',
        text: '暂无待评价商品',
        marginTop: '120px',
        width: '212px'
      },
      point_name: '积分',
      comment_enjoy_point: '', // 晒单送积分
      comment_point: '', // 评价赠送积分
      query: '',
      type: 'evaluate', // share、evaluate、price
      // p: 1,
      commentList: []
      // is_already_singles: false
    }
  },
  methods: {
    Jump(url, data) {
      this.$JumpPath(this, url, data)
    },
    init(params) {
      this.$loadingWrap.show()
      getCommentList(params).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          const resData = res.data
          this.point_name = resData.point_name
          this.comment_enjoy_point = resData.comment_enjoy_point
          this.comment_point = resData.comment_point
          this.commentList = resData.lists
          // this.is_already_singles = resData.is_already_singles || false
        } else {
          this.$Error(res.msg)
        }
      })
    },
    scaleGoodsPriceFn(price) {
      return scaleGoodsPrice(price)
    }
  },
  created() {
    this.query = this.$route.query
    this.type = this.query.type
    const params = {
      type: this.type,
      order_id: ''
      // p: this.p
    }
    if (this.query.orderId) {
      params.order_id = this.query.orderId
    }
    //从订货商团队订单跳转
    if (this.query.dhsVenderOrder) {
      params.dhsVenderOrder = this.query.dhsVenderOrder
    }
    window.addEventListener('wxshow', () => {
      this.init(params)
    })
    
  }
})
</script>

<style lang="scss">
.msettlement-goods {
  background: #f7f7f7;
  ul {
    padding: 20px 24px;
  }
  .comment-li {
    position: relative;
    margin-bottom: 20px;
    // padding: 20px 20px 0px;
    .van-card__content {
      position: relative;
    }
    .price {
      position: absolute;
      left: 0;
      bottom: 0;
      margin-top: 4px;
      // font-size: 24px;
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .singles {
      position: absolute;
      right: 0;
      top: 0;
      text-align: right;
      font-size: 24px;
      line-height: 40px;
    }
    .bottom-btn {
      position: absolute;
      right: 0;
      bottom: 0;
      // margin-top:10px;
      box-sizing: border-box;
    }
    .msettlement-but {
      float: right;
      // display: inline-block;
      height: 56px;
      margin-left: 10px;
      padding: 0 20px;
      // line-height: 52px;
      border: 2px solid #f20b22;
      border-radius: 60px;
      color: #f20b22;
      background: transparent;
      font-size: 24px;
    }
  }
  .no-data img {
    width: 426px;
  }
}
</style>